<template>
  <div class="popup">
    <van-search
      v-model="iptVal"
      show-action
      :placeholder="iptPlaceholder"
      @search="onSearch"
      @input="onInput"
      @cancel="onCancel"
    />
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />
    <list v-else-if="blockShow == 2" :arr="listArr" @cellclick="tagClick"/>
    <myProduct
      v-else
      :filterCategory="filterCategory"
      :goodsList="goodsList"
      @categoryChange="categoryChange"
      @priceChange="priceChange"
    />
  </div>
</template>

<script>
import HistoryHot from "../components/HistoryHot.vue";
import myProduct from "../components/myProduct.vue";
import list from "../components/list.vue";
import { GetPopupData, GetSearchData ,GetTimeData} from "../request/api";

export default {
  name: "myPopup",
  data() {
    return {
      iptVal: "",
      iptPlaceholder: "",
      //  1代表历史记录与热门搜索区块
      // 2代表列表区块
      // 3代表产品区块
      blockShow: 1,
      // 历史区块的数组
      historyKeywordList: [],
      // 热门搜索的数组
      hotKeywordList: [],
      // 传递给myproduct组件的数据
      filterCategory: [],
      // 传递给myproduct组件的商品列表数据
      goodsList: [],
      order: "",
      // 分类的id
      categoryId: 0,
      // id默认的排序方式，price价格排序
      sort: "id",
      // list组件数组
      listArr:[]
    };
  },
  methods: {
    liveFGn() {
      this.$router.push("/home");
    },
    //   搜索
    onSearch() {
      let _this = this;
      // 发起请求
      GetSearchData({
        // 传递参数
        keyword: this.iptVal,
        page: 1,
        size: 20,
        order: _this.order, //价格排序 子组件传过来之后向服务器请求必须是动态的参数
        categoryId: _this.categoryId,
        sort: _this.sort
      }).then(res => {
        // console.log(res.data)
        if (res.errno == 0) {
          // 跳转到产品区块
          _this.blockShow = 3;
          let { filterCategory, goodsList } = res.data;
          // 深拷贝 获取的数据名称与vant的要求不一样所以要转换把name替换成text，id替换成value
          let arr = JSON.parse(
            JSON.stringify(filterCategory)
              .replace(/name/g, "text")
              .replace(/id/g, "value")
          );
          _this.filterCategory = arr;
          console.log(_this.filterCategory);
          _this.goodsList = goodsList;
        }
      });
    },
    //   取消
    onCancel() {
      //   go(-1)代表跳回上一个页面
      this.$router.go(-1);
    },
    categoryChange(value) {
      // console.log(value)
      // 调用onSearch方法
      this.categoryId = value;
      // 向服务器发起请求
      this.onSearch();
    },
    // 价格的点击事件
    priceChange(value) {
      // console.log(value);
      // 价格排序
      this.order = value;
      this.sort = "price";
      // 发请求
      this.onSearch();
    },
    // 请求数据列表
    onInput(){
      // 显示实时搜索列表
      this.blockShow = 2
       GetTimeData({
         keyword:this.iptVal
         }
       ).then(res=>{
         if(res.errno==0){
          //  console.log(res.data)
           this.listArr = res.data;
         }
       })
    },
    // 历史区块点击事件
    tagClick(value){
    // console.log(value);
    this.iptVal = value;
    // 搜索发起请求
    this.onSearch();
    },
  },
  components: {
    HistoryHot,
    myProduct,
    list
  },
  created() {
    GetPopupData().then(res => {
      console.log(res);
      if (res.errno == 0) {
        let { defaultKeyword, hotKeywordList, historyKeywordList } = res.data;
        this.iptPlaceholder = defaultKeyword.keyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      }
    });
  }
};
</script>
<style scoped>
.popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: #efefef;
  z-index:9;
}
</style>
